<template>
  <div class="phone-container">
    <div class="top">
      <div class="title">销售订单生产进度 <span></span></div>
    </div>
    <el-form label-width="100px" style="padding: 10px">
      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="12">
          <el-form-item>
            <el-input v-model="state.sd.csocode" placeholder="销售订单号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-input v-model="state.sd.cinvname" placeholder="存货名称"/>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item>
            <el-input v-model="state.sd.ccusname" placeholder="客户名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button size="small" type="primary" class="ml10" @click="searchData">
            <el-icon><ele-Search /></el-icon>查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="state.jinDuList" border style="width: 100%">
      <el-table-column label="订单情况" min-width="55%">
        <template v-slot="scope">
          <span>订单号:{{scope.row.cSoCode}}</span> <br/>
          <span>客户名称:{{scope.row.cCusName}}</span> <br/>
          <span>存货名称:{{scope.row.cInvName}}</span> <br/>
          <span style="color: #f56c6c">订单数量:{{scope.row.isll}}{{scope.row.cComUnitName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="进度情况" min-width="45%">
        <template v-slot="scope">
          <span>下料出库:{{scope.row.xwhMapStr}}</span><br/>
          <span>锻压完成:{{scope.row.dwhMapStr}}</span><br/>
          <span>机加完成:{{scope.row.jwhMapStr}}</span><br/>
          <span>成品完成:{{scope.row.whMapStr}}</span><br/>
          <span>发货完成:{{scope.row.fwhMapStr}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="phone3pc">
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
import {reactive, ref, onMounted} from "vue";

const state = reactive({
  sd: {
    csocode: '',
    ccusname: '',
    cinvname: ''
  },
  jinDuList: [],
})
const searchData = ()=>{
  if(state.sd.csocode || state.sd.ccusname || state.sd.cinvname){
    loadData();
  }else{
    ElMessage.error("请输入查询条件")
  }
}
const loadData = ()=>{
  if(state.sd.csocode || state.sd.ccusname || state.sd.cinvname){
    request({
      url: '/sal/listsomain',
      data: state.sd
    }).then(res => {
      const { data } = res
      state.jinDuList = data
    })
  }else{
    state.jinDuList = [];
  }
}
onMounted(()=>{

})
</script>

<style scoped lang="scss">

</style>
